import {Component, ComponentFactoryResolver, Input, OnInit, ViewChild} from '@angular/core';

import {Blade} from './blade.model';
import {BladeContainerDirective} from './blade-container.directive';
import {animate, state, style, transition, trigger} from '@angular/animations';

declare var $: any;

@Component({
  selector: 'app-blade',
  templateUrl: './blade.component.html',
  styleUrls: ['./blade.component.css'],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(500)
      ]),
      transition('* => void', [
        animate(500, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})
export class BladeComponent implements OnInit {
  @Input()
  public blade: Blade;

  public animateState = 'in';
  private widthCurrent = 0;

  /**
   * 子视图
   *
   * @type {BladeContainerDirective}
   * @memberOf BladeComponent
   */
  @ViewChild(BladeContainerDirective, {static: true})
  containerView: BladeContainerDirective;

  /**
   * 创建一个弹出层实例。
   * @param {ComponentFactoryResolver} componentFactoryResolver 组件创建工厂
   *
   * @memberof BladeComponent
   */
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit() {
    this.loadComponent();
  }

  /**
   * 加载组件
   *
   *
   * @memberof BladeComponent
   */
  loadComponent() {
    if (this.blade.bladeContainerType) {
      try {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.blade.bladeContainerType);
        let viewContainerRef = this.containerView.viewContainerRef;
        viewContainerRef.clear();
        let componentRef = viewContainerRef.createComponent(componentFactory);
        this.blade.bladeContainerInstance = componentRef.instance;
        let container = this.blade.bladeContainerInstance;
        container.currentBlade = this.blade;
      }
      catch (ex) {
        this.blade.bladeData.error = ex;
      }
    }
    else {
      this.blade.bladeData.error = '请对内容模板赋值！';
    }
  }

  /**
   * 最小化
   *
   * @param {any} element
   *
   * @memberOf BladeComponent
   */
  bladeRestore(element: HTMLButtonElement) {
    var parent = $(element).parents('.blade');
    if (parent.is(':animated')) return false;
    parent.stop().animate({width: this.widthCurrent}, () => {
      this.blade.bladeData.isMaximized = false;
    })
    // var parents = $(element).parents();
    // for (var i = 0; i < parents.length; ++i) {
    //   // code...
    //   var par = parents[i];
    //   // console.log(par);
    //   if ("blade" == $(par).attr('class')) {
    //     // code...
    //     $(par).width(this.blade.bladeData.maximizedWidth);
    //     this.blade.bladeData.isMaximized = false;
    //   }
    // }
  }

  /**
   * 最大化
   *
   *
   * @memberOf BladeComponent
   */
  bladeMaximize(element: HTMLButtonElement) {
    var parent = $(element).parents('.blade');
    if (parent.is(':animated')) return false;
    var clientWidth = document.body.clientWidth,
      w = 0,
      navbarWidth = $('.nav-bar').width(),
      parents = $('.blade');

    this.widthCurrent = parent.width();
    parent.stop().animate({width: clientWidth - navbarWidth}, () => {
      this.blade.bladeData.isMaximized = true;
      if (parent.offset().left > navbarWidth) {
        $('.cnt').scrollLeft(parent.offset().left - navbarWidth)
      }
    })


    // // console.log(this.containerDirective.viewContainerRef);
    // // console.log($(element).parent('.blade'));

    // var parents = $(element).parents();
    // for (var i = 0; i < parents.length; ++i) {
    //   // code...
    //   var par = parents[i];
    //   // console.log(par);
    //   if ("blade" == $(par).attr('class')) {
    //     // code...
    //     var curWidth = $(par).width();
    //     console.log(curWidth);
    //     this.blade.bladeData.maximizedWidth = curWidth;
    //     var offLeft = $(par).offset().left - 90;
    //     console.log(offLeft, 22)

    //     $(par).width('100%');

    //     // $(par).animate({width:"100%"})
    //     // console.log(offLeft)
    //     if (offLeft > 90) {

    //       $('.cnt').scrollLeft(offLeft);

    //     }
    //     // $(par).css({position: "absolute
    //     // $(par).css("left","90px")
    //     this.blade.bladeData.isMaximized = true;
    //   }
    // }

  }

  /**
   * 关闭
   *
   *
   * @memberOf BladeComponent
   */
  bladeClose(element: HTMLButtonElement) {
    this.blade.bladeContainerInstance
      .beforeClosing()
      .then(res => {
        if (res == true) {
          this.blade.bladeService.closeBlade(this.blade)
        }
      })
      .catch(error => this.blade.bladeData.error);
  }

  setVisibleToolsLimit() {
    // this.blade.bladeData.toolsPerLineCount
  }

  /**
   * 显示更多的工具条
   *
   * @param {any} event
   *
   * @memberof BladeComponent
   */
  showMoreTools(event: MouseEvent) {
  }


}


// WEBPACK FOOTER //
// ./src/app/shared/blade/blade.component.ts
